<!--
 * @Description: 用户登录
 * @Author:  zhangweigang
 * @Date: 2021-02-14 20:08:05
 * @LastEditTime: 2021-05-04 20:57:57
 * @LastEditors: zhangweigang
-->
<template>
  <div class="login">
    <el-form class="login_form" ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <div>
          <el-button type="success" @click="login">登录</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { userLoginStart } from '@/network/product.js';
export default {
  data() {
    var validateUserName = (rule, value, callback) => {
      let str = /^[^\u4e00-\u9fa5]+$/.test(value);
      if (value === '') {
        callback(new Error('请输入用户名称'));
      } else if (value.length <= 1 || value.length >= 20) {
        callback(new Error('用户名称长度必须在 1 到 20 个字符之间'));
      } else {
        callback();
      }
      /**
       * else if (!str) { callback(new Error('用户名称不含有中文')); }
       */
    };
    return {
      // 登录表单
      loginForm: {
        username: '',
        password: ''
      },
      // 登录校验
      loginFormRules: {
        username: [{ required: true, validator: validateUserName, trigger: 'blur' }],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度6到15个字符以内',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    // 登录
    login() {
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          userLoginStart(this.loginForm).then((res) => {
            if (res.data.code === 0 && res.status === 200) {
              this.$message({
                showClose: true,
                message: '登录成功！',
                type: 'success',
                duration: 4000
              });
              // 存储当前用户名
              localStorage.setItem('username', this.loginForm.username);
              // 成功跳转首页
              this.$router.push('/home');
            } else {
              this.$message({
                showClose: false,
                message: '用户名或密码输入错误，请重新输入！',
                type: 'error',
                duration: 4000
              });
              return false;
            }
          });
        } else {
          this.$message({
            showClose: false,
            message: '信息校验失败！',
            type: 'error',
            duration: 4000
          });
          return false;
        }
      });
    },
    reset() {
      this.$refs.loginFormRef.resetFields();
    }
  }
};
</script>

<style lang="less" scoped></style>
